<template>
      <div class="search-popover">
         <div class="search-top">
             <div class="item-top"> 
            <p>搜索记录 <i class="el-icon-delete" @click="RemoveRecords"></i></p>
            <p @click="indexIn=!indexIn" style="color:black;font-size:12px;padding:6px 20px 0 0;color:#aaa;">查看全部</p>
             </div>
              <div :class="indexIn==true ? 'records active' : 'records'">
                <span v-for="(item,i) in records" :key="i"  @click="toResult(item)">{{item}}</span>
              </div>
         </div>
         <div class="hotlist">
           <div class="hot-top">
             热搜榜
           </div>
            <div class="hot-bottom" @click="toResult(item.searchWord)" v-for="(item,i) in hots" :key="i">
              <div :class="i<3?'Topnum color-red':'Topnum'" >
                {{i+1}}
              </div>
             <div class="hot-item">
              <div class="item">
              <span style="font-size:16px;">{{item.searchWord}}</span>
              <span class="hot red">HOT</span>
               <span style="font-size:10px;">{{item.score}}</span>
               </div>
              <p style="font-size:12px;padding:5px 0;">{{item.content}}</p>
             </div>
           </div>
         </div>
      </div>
</template>

<script>
export default {
   name:"search",
   data(){
     return {
      indexIn:false,
      hots:[],
      // records:this.$Store.state.homePage.recordslist || []
     }
   },
   computed:{
      records(){
       return this.$Store.state.homePage.recordslist || []
      }
   },
   methods:{ 
      async getSearchHot(){  //获取热搜列表
       const {data:res} =await this.$request("/search/hot/detail")
       this.hots=res.data
    },
    toResult(name){
      console.log(this.$Store.state.homePage.recordslist)
       this.$router.push(`/searchResult?searchWord=${name}`)
     },
     RemoveRecords(){
       //删除浏览记录
       this.records=[]
       localStorage.removeItem("records")
       
     }
   },
    mounted(){
      this.getSearchHot()
    }
}
</script>

<style lang="less" scoped>
      .search-popover{
        width:320px;
        height:500px;
        overflow-y:auto;
        .search-top{
          .item-top{
            display:flex;
            justify-content:space-between;
          }
          .records{
            margin-top:15px;
            height:75px;
            overflow:hidden;
          span{
            display:inline-block ;
            // width:30%;
            padding:0 10px;
            height:30px;
            line-height:30px; 
            align-items:center;
            color:#ccc;
            border:1px solid #ccc;
            border-radius:10px;
            margin:5px 5px;
           }
          }
          .active{
             overflow:visible;
             height:100%;
          }
        }
        .hotlist{
          .hot-top{
            margin-top:10px; 
          }
          .hot-bottom{
              margin-top:20px;
            display:flex;
            width:100%;
            height:50px;
            align-items:center;
          }
          .Topnum{
            width:30px;
            height:40px;
            line-height:40px;
            font-size:16px;
          }
          .color-red{
            color:red;
          }
          .hot-item{
            .item:nth-child(1){
                 color:black;
            }
            .p1{
              font-size:10px;
              color:#ccc;
            }
            .red{
              color:red;
              font-size:12px;
              margin:0 10px;
              font-style:oblique;
            }
          }
        }
      }
</style>